<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <link rel="stylesheet" href="../../widget/components/tabbar/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      /* 头像样式 */
      .placeholder {
        background-color: #fff;
      }
      .person-center-header {
        padding-bottom: 0.68rem;
        margin-bottom: 0.24rem;
        background-color: #fff;
      }
      .personCenter-head-img {
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.32rem;
        text-align: center;
        line-height: 1.2rem;
      }

      /* 用户名样式 */
      .personCenter-uname {
        width: 3rem;
        height: 0.5rem;
        margin-left: 0.48rem;
        font-size: 0.36rem;
        font-weight: bold;
        line-height: 0.5rem;
        color: rgba(3, 3, 3, 1);
      }

      /* 导航按钮样式 */
      .van-row {
        padding: 0.32rem 0.32rem 0;
        background-color: #fff;
      }
      .van-col {
        padding-bottom: 0.48rem;
      }
      .person-center-icon-container {
        position: relative;
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.32rem;
        color: rgba(51, 51, 51, 1);
      }
      .van-icon {
        position: absolute;
        top: 0.07rem;
        right: 0;
        font-size: 0.32rem;
        color: rgb(200, 201, 204);
      }
      .person-center-icon {
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.24rem;
        vertical-align: bottom;
      }

      .headerImg {
        width: 100%;
        height: 100%;
        border-radius: 135rem;
      }

      .personCenter-type {
        text-align: center;
        line-height: normal;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content comment-container">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div>
          <div class="flex-wrap flex-center-wrap person-center-header">
            <div class="personCenter-head-img">
              <img class="headerImg" :src="userInfo.headpath" alt="错误" />
            </div>
            <p class="personCenter-uname">{{ userInfo.username }}</p>
          </div>
          <van-row>
            <van-col span="24">
              <div class="person-center-icon-container" @click="goActivation">
                <img
                  class="person-center-icon"
                  src="./image/personCenter/active.png"
                />
                <span class="personCenter-type">激活课程</span>
                <van-icon name="arrow" />
              </div>
            </van-col>
            <van-col span="24">
              <div class="person-center-icon-container" @click="goMyCourse">
                <img
                  class="person-center-icon"
                  src="./image/personCenter/mycourse.png"
                />
                <span class="personCenter-type">我的课程</span>
                <van-icon name="arrow" />
              </div>
            </van-col>
            <van-col span="24">
              <div class="person-center-icon-container" @click="goOrder">
                <img
                  class="person-center-icon"
                  src="./image/personCenter/myorder.png"
                />
                <span class="personCenter-type">订单管理</span>
                <van-icon name="arrow" />
              </div>
            </van-col>
            <van-col span="24">
              <div class="person-center-icon-container" @click="goHelp">
                <img
                  class="person-center-icon"
                  src="./image/personCenter/kefu.png"
                />
                <span class="personCenter-type">联系客服</span>
                <van-icon name="arrow" />
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="page-bottom">
        <zl-tabbar :arr="[0,0,1]"></zl-tabbar>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../widget/components/tabbar/index.js"></script>

    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Field 组件
      Vue.use(vant.Field)
      // 注册 Layout 组件
      Vue.use(vant.Row).use(vant.Col)
      Vue.use(vant.Icon)

      new Vue({
        el: '#app',
        components: {
          'zl-tabbar': tabbar
        },
        data: {
          userInfo: {},
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          goActivation() {
            window.location.href = './activation.html'
          },
          goMyCourse() {
            window.location.href = './my.html'
          },
          goOrder() {
            window.location.href = './order.html'
          },
          goHelp() {
            window.location.href = './customerService.html?cateid=0'
          }
        },
        created() {
          userService.getUserInfo().then(res => {
            this.userInfo = res
            this.isShowZLLoading = false
          })
        }
      })
    </script>
  </body>
</html>
